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Who am I? 

• 7 years at Maxis 
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What this talk is about 

1. Why HTML*? 

2 . Maxis' UI, based on HTML. Shipped with 
SimCity 

3. Tips and gotchas 
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What this talk is not about 

• Building web games in HTML5. This is 
specific to using HTML to build just the UI 
component for a large native game. 

• Emscripten / asm.js 

• How to build generic web pages. 
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Maxis' journey in UI tech 


. UTFWin 

• Custom built 
solution, didn't 
fit all our needs, 
hard to animate, 
hook up. 
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Maxis' journey in UI tech 

• Scaleform / Flash 

• Relies on external license, reliant on Flash. 

• Non-mergeable binary data format 

• Potential issues with ActionScript performance 

• Flash as a general technology was slowly 
losing support from major players like Apple 
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SimCity and UI 

• Start of SimCity development, needed a 
new UI system 

• Vision of combined web and client 
interfaces, with shared components 
between web and in-game UI 

• Easy to update and integrate web content 
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SimCity and UI 

• Web-based UI using EA WebKit, and custom- 
built JavaScript layer. 

• Investigated other options as well 

• For engine, at the time didn't find anything better, 
and EA WebKit was starting to get traction. 

• For building web pages, couldn't find good 
WYSIWYG editor, built it ourselves. 
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SuperCircularColllder 


SIMCITY WORLD 


CITYLOG 


MULTIPLAYER 


AMUSEMENT 


Transfer your Multiplayer Regions 
and Cities to play in Single-Player! 


LEARN MOREO 
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What this talk is about 

1. Why HTML*? 

2 . Maxis' UI, based on HTML. Shipped with 
SimCity 

3. Tips and gotchas 
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Why HTML? 

• Existing tech 

• WebKit, Blink, Gecko, 

• Inspector/Debugger 
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etc. 
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Why HTML? 

• Fast reloading. Takes 3 seconds to reload 
the entire UI. No im port/export process, 
or compilation/linking required. 

• Most implementations have blazing fast 
JavaScript engines with JIT compilations. 

• Easy to update over the web 
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Why HTML? 

• You are probably going to need web content 
for leaderboards, etc. anyway. May as well 
go all the way! 

• Large community. Easy to hire people or find 
knowledge 

• Caveat: Not everyone who has "web" background is 

suitable for game dev. Need to be performance-conscious. 
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Why HTML? 

• Modding. If you want your PC game to be 
modded by your community then there's 
really nothing that beats HTML. 

• Most people know it, and it's easy to modify. 

• Caveat: Remember people can and will 
read your code: 

• gameCode.DoSomethingStupid= 

f unction(stupidity) {... /* © */} 
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Other EA games using HTML tech 

• SimCity 

• Skate 3 

• Sims 

• Most new console games for online 
features 
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What this talk is about 

1. Why HTML*? 

2. Maxis' UI, based on HTML. Shipped 
with SimCity 

3. Tips and gotchas 



GAME DEVELOPERS CONFERENCE® 2015 


MARCH 2-6, 2015 GDCONF.COM 


SimCity's UI 

• More complicated than action oriented 
games UI. 

• As a result both have more requirements 
(layouts, dynamic UI scaling, etc) and higher 
budget. 

. EA WebKit 
. MUiLE 
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EA WebKit iw 

• Backend of our UI 

• Fork of Apple's WebKit project, but 
designed to be embedded into games, 
while providing much more hooks such as 
custom memory allocator, profiler, 
JS/C++ bindings, network layer, etc. 

• Open sourced: http://gpl.ea.com 
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EA WebKit 



• Get all the benefits of active development 
(and drawbacks). 

• WebKit's modular design helps adapt to 
other platforms. 

• Good inspector for live inspection, JavaScript 
debugging 

• Gotcha: Doesn't work on mobile (platform 
limitations) 
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EA WebKit 



• Features: 

• Supports multiple views 

• Hardware compositing API 

• Efficient JavaScript bindings 

• Designed for games, support plugins for 
custom text Tenderer, memory allocators, etc 

• (First party support) 
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Debug console 



>ui -showinspector 


Store 


EA WebKit Inspector 
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if Cfthi s.rrOebugConsol e| !== null) { 
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thi s.rrDebugConsol e. UpdatePosi tion() ; 
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if (thi s.mControl Inspector !== null) { 

thi s.mControl Inspector. UpdatePositionQ ; 

} 

// only handle the mouse here if the editor is turned off. because the 
// editor needs to handle picking in a special way. =i 

// TODO : investigate using element picking instead of a software solut 


► Watch Expressions 
▼ Call Stack 


(anonymous function) UIManager.js:1093 


Gamelnterface.js:184 


(anonymous 
function) 

(anonymous function) UIManager.js:148 

▼ Scope Variables 

▼ Local 

▼ arguments : Arguments [0] 

► cal lee: function () { 
length: 0 

► proto : Object 

► date: Thu Sep 22 2011 17:5... 
el apsedT i meMS : 7049 
handled: undefined 

handl erCount : undefined 
i : 1 

numRootWi ns : 1 

► thi s : Object 

► Global DOMWindow 

▼ Breakpoints 

0 UIManager.js:1093 

if (thi s.rrDebugConsol e !== n.. 

► Workers □Debug 
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MUiLE 


• HTML/JavaScript-based UI layer. 

• Custom to Maxis. 


• Built most of the functionality from the 
ground up as we couldn't find good 
alternatives at the time. 


• Just implementing a button with the 
correct behaviors took some time... 






GAME DEVELOPERS CONFERENCE® 2015 


MARCH 2-6, 2015 GDCONF.COM 


MUiLE 

. All UI 100% in HTML/J S/CSS. 

• Component based, storing layouts in 
JSON files, which allow us to merge and 
allow concurrent edits. 

• Layout files then loaded in dynamically and 
the DOM is constructed from them. 

• Layouts can link to other layouts, 
allowing reusability. 
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{ 

"instancelD" : 1, 

"left": 205, 

"top": 98, 

"width": 800, 

"height": 600, 

"visibility": true, 

"ignoreMouse" : true, 

"children": [ { 

"instancelD": 2, 

"left": 10, 

"top": 10, 

"width": 176, 

"height": 45, 

"visibility": true, 

"drawable": { 

"type": 2, 

"images": [ "Graphics/textlnputField . png" ] 

}, 

"type": "cWindow" 

}, 
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"layoutPath" : "Layouts/GlobalUI2. js", 
"instancelD": 3, 

"left": 0, 

"top": 0, 

"width": 800, 

"height": 600, 

"controlID" : 174136993, 

"visibility": true 

} L 

"type": "cLayout", 

"version": 1 
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MUiLE 

• In game communication is done through 
async callbacks, through game commands, 
game events, and game data callbacks. 

• Better for multithreading, and similar to the async 
nature of web interfaces 

• PostGameCommand(kCmdDoSomething, someData, 
function(result) { /* got result! */}); 

• RequestGameData(kDataPopulationCount, 
function(data) { /* process data */ }); 
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MUiLE Editor 

. WYSIWYG editor, also built in HTML as 
part of the package itself, allowing it to 
be used in any browser. 

• No dependencies. Anyone with a debug 
version of the game can edit UI using a 
browser. 

• Can edit the UI in-game. 
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Scene Graph 
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MUiLE Editor 

• Communicates with game through a localhost 
server served by the game (we already use that 
for other debugging utilities) 

• Uses a REST-like API. When in game we expose a 
custom URL handler (game://localhost/) instead. 

• Editor: http://localhost/resource/editor.html 

• List all the layouts: http://localhost/dir/layouts 
(GET) 

• Save layout: http://localhost/layout/mainMenu. json 
(POST) 

• Load layout: http://localhost/layout/mainMenu. json 
(GET) 
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MUiLE Animations 

• Recommended way is to use CSS 

• Fade in/out, transitions, keyframes etc. 

• When we started it wasn't as advanced, and we found out 
we also wanted more control. 

• Implemented custom animation system 

• Full control over timeline, can scrub, stop, loop. 

• Controls exactly the parameters we need. 

• Probably increased load in the JS engine as they aren't 
natively animated like in CSS. 

• Each control has triggers to play/stop/loop animations. 
Each animation is a timeline of different controls' states 
such as positions, visibilities, rotations, or game events. 
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Ul Tool Timeline 
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Early Sceenshots 
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Make sure 
to use 
sandbox 
flag for your 
iframes! 
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► Test J.-WWiltTaM’! 
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Final Shipped UI 
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SIMCITY WORLD 
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W SimCity is better with friends! 


Your Origin friends list is in game, filtered by Origin 
friends who own SimCity. 

When you start the game your online status is 
visible to your friends. Click the button next to your 
avatar to change your status. 

CityLog is a game event feed broadcasting 
events in SimCity World. Your CityLog feed is 
currently set to share with your friends. If you 
would like to change your settings, go to the 
Settings menu. 
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I Region: 


I City: 
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What this talk is about 

1. Why HTML*? 

2. Maxis' UI, based on HTML. Shipped with 
SimCity 

3. Tips and gotchas 
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Content Creation 

• Unless you are using this for limited use 
cases, we suggest having a good 
WYSIWYG editor. Your UI artists will 
thank you. 

• We built our own but there should be a 
lot more choices now (Adobe Edge, etc) 
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Content Creation 

• Traditional split of HTML/CSS/JS is such that 
they represent content, style, and logic. 
Good for representing documents. 

• Essentially building a mini-application. Built 
most UI out of JSON modules that are 
loaded in dynamically through JS instead. 



GAME DEVELOPERS CONFERENCE® 2015 


MARCH 2-6, 2015 GDCONF.COM 


Pick a Good Engine 

• Access to source code. You really need to be able to 
dig into it if things go wrong. 

• Find one which you can get good support from. 

• Allow custom memory allocator hooks, etc. You need 
the control. 

• Has hardware rendering support and provides hooks 
for it. 

• Comes with a standalone demo app for you to test 
pages on. 

• Supports JIT compilation 

• JIT mode is at least twice as fast for us 
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JavaScript Organization 

• Be careful with common libraries such as 
jQuery. 

• They may be great for web development with 
tons of features, they may not give the best 
per-frame performance or memory-use. 

• Make sure to profile before you commit! 

• Read JavaScript: The Good Parts 
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JavaScript Organization 

• We used the Google Closure Library 

• Library developed in a modular fashion, allowing 
you to selectively pull in only the necessary 
components. 

• Contains useful functions for matrix calculations, 
cryptography, basic utilities for inheritance, etc. 

• Open Sourced 
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JavaScript Organization 

• Google Closure Library (continued) 

• Solves the issue of managing large amount of JS 
files. Other solutions usually involve just 
concatenating them all or modifying HTML files. 

• Allows you to specify dependencies among JS files 
and build up a manifest JS files that pull in all 
necessary dependencies. 

•May be less useful with advent of Common JS. 
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JavaScript Organization 

• Standard JS annoyances 

<htmlxbody> 

< script src="ControlInspector . js"x/ script > 
<script src="UIAnimationEdito. js"x/script> 
<script src="UIEditorDropDown . js"x/script> 
< script src="UIEditor . js"></ script > 
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JavaScript Organization 

• Google Closure Library dependencies example 

Project. is: 

goog. provide( f muile. editor. project' ); 

goog. require( 'muile. project' ); // pull in the general muile library 

goog. require( 'muile. editor. Controllnspector ' ); 
goog. require( 'muile. editor. UIAnimationEditor ' ); 
goog. require( 'muile. editor. UIEditor' ); 
goog. require( ' muile. editor .UIEditorDropDown ' ) ; 
goog. require ( ' muile. editor . UI Editor Properties ' ) ; 


EditorControlInspector . is : 

goog. provide( f muile. editor. Controllnspector-’ ); 


Editor.html: 


<script src="Project . js-”x/script> <!- this automatically pulls in the other files --> 
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JavaScript Organization 

• Google Closure Compiler 

• Designed to go with Closure library 

• Allows you to "compile" all JS files into one after 
analyzing dependencies. 

•Because of the way it works compiled and uncompiled code 
may work differently if dependencies weren't correctly 
specified! 

• Generates source maps to allow debugging compiled 
files in debugger (similar to .pdb files) 

• 2 optimization modes: simple and advanced. Advanced 
mode requires much more aggressive changes to code 
but could lead to big gains 
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JavaScript Organization 

• Google Closure Compiler (continued) 

• Examples of advanced mode compilation: 

var DEBUG = false; 
var counter = 1; 
if (DEBUG) { 

console . log( ' Super secret output:' + counter++); 

} 

console . log( ' Generic boring output:' + counter); 

• Compiled to: 


console. log( "Generic boring output:!"); 
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JavaScript Organization 

• Communicating with the game 

• Use C++ bindings 

• You could try to be cute and use REST APIs 

•game : //localhost/Game/Commands/Sim/AddPopulation/ 
1 

• You are kind of adding unnecessary cost for 
string parsing etc. Just call the C++ function. 

•Game. AddPopulation(l) 



GAME DEVELOPERS CONFERENCE® 2015 


MARCH 2-6,2015 GDCONF.COM 


Performance 

• Rendering 

• We used software rendering for SimCity as we 
didn't have good hardware compositing support 
yet. 

• Performance was mostly fine but animating 
stacked opacity killed performance. Easily created 
10ms hitches without knowing why. 

• Switch to a hardware compositing model now 
used by some browsers. 

• http://www.chromium.org/developers/desiqn- 

documents/qpu-accelerated-compositinq-in-chrome 
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Performance / Rendering 

• Make sure can do dirty rect 
visualization. 


• If you are using WebKit or 
Blink based browsers, use 
translateZ(O) to force elements 
into another layer if using 
hardware compositing. Only do 
this for animating elements. 
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Performance 

• Memory use 

• Watch your memory use! We found that it's not 
easy to profile memory used by the UI system as 
we would get a global heap using up to lOOmb of 
memory, with no finer details. Blink-based 
browsers seem to have better control over this. 

• Try to use pools instead of dynamic allocation as 
much as possible 
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Performance 

• C++ / JS bindings 

• Try to reduce communications between C++ and JS code. 
The bridge is not optimized. 

• You may have to cache some data on both sides to 
prevent back-and-forth communications. 

• Don't do something like this every time 

uiView->evalDS( ff someCharacter.ShowHealth()”); 

• This requires a recompilation. Hopefully your engine of 
choice can cache JS functions so you can do this instead: 

auto cacheFunction = uiView->evalDS( ff (function() { 
someCharacter .ShowHealthQ ; 

})”); 

cacheFunction . Evaluate( ) ; // this will be much more efficient! 
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Grab bag 

• Scrolling text and 
surprisingly hard! 
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images smoothly is 
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Non-PC platform issues 

• Console 

• Mostly works, but you won't get JIT-compiled 
JavaScript code. Reduce JS workload and budget 
accordingly 

• Mobile 

• Especially on iOS it's not possible to ship your own 
HTML/JS runtime, so need to use native web view. 

• iOS now supports JIT through WKWebView 
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Wrap up 

• It's possible to make quality UI using 
HTML 

• Tools and libraries available. 

• Building our own tools and editor was 
very time consuming. 

• Performance will be less than native UI 

• Improved iteration time and ease of 
development was worth it. 
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Thanks! 

• Brad Smith and Scott Clarke, who did a lot of 

the actual work on this. 

• Renaud Ternynck for his continuous 
bombardment of request for features and 
improvements. 

• EA WebKit team for their support throughout. 

• The entire Maxis UI team for making this all 
possible. 
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